<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>@media适配</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 95%;
        --box-height: 170%;
      }
      .demo-box.demo-box {
        columns: 4;
      }
      body {
        margin: 0;
        padding: 0;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .column-content > li {
        display: flex;
        margin: 10px 0;
      }
      .column-content > li.focus {
        background-color: rgba(0, 0, 0, 0.1);
      }
      .column-content > li > *:first-child {
        flex: 1;
      }
      .column-content > li > *:last-child {
        flex: 3;
      }
      .column-content > li > * {
        margin: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      }

      @media only screen and (max-width: 1000px) {
        .demo1[class] {
          background: green;
        }
      }
      .box {
        height: 150px;
        width: 150px;
      }
      .demo1 {
        background: red;
        color: #fff;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./20-shape布局.html">上一篇</a>
      <a href="./22-图片等多媒体处理.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>@media设备适配</dt>
        <dd>
          <div class="demo1 box">屏幕宽度小于1000px变绿</div>
        </dd>
        <dd>
          <pre><code class="language-scss">
          @media only screen and (min-width: 500px) {
            .demo1 {
              background: green;
            }
          }</code></pre>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>规则</dt>
        <dd>
          <p>由上例可知，@media由四部分组成</p>
          <ul>
            <li>媒体查询修饰符only</li>
            <li>媒体类型screen</li>
            <li>媒体条件and</li>
            <li>媒体特性min-width</li>
          </ul>
        </dd>
        <dd>
          <h4>媒体查询修饰符</h4>
          <ul>
            <li>
              <p>only</p>
              <p>为了让老旧浏览器不识别而诞生，现在没有任何理由使用它</p>
            </li>
            <li>
              <p>not</p>
              <p>
                表示否定，否定
                <b>整个查询语句</b>
              </p>
            </li>
          </ul>
        </dd>
        <dd>
          <h4>媒体类型</h4>
          <ul>
            <li>
              <b>screen</b>
              普通设备
            </li>
            <li>
              <b>print</b>
              表示打印机和打印页面
            </li>
            <li>
              <b>all</b>
              所有设备
            </li>
          </ul>
          <p>ps：其他类型已不再支持</p>
        </dd>
        <dd>
          <h4>媒体特性</h4>
          媒体特征可以前方加min/max前缀，来表示不小于/不大于该数值，例：
          <br />
          min-aspect-ratio: 1/1表示宽高比不小于1。以此类推，不再赘述。
          <ul class="column-content">
            <li class="focus">
              <p>aspect-ratio</p>
              <p>输出设备（可以理解为屏幕）的宽高比。</p>
            </li>
            <li>
              <p>color</p>
              <p>
                设备色彩位数，0是水墨屏。
              </p>
            </li>
            <li class="focus">
              <p>height</p>
              <p>
                设备高度查询
              </p>
            </li>
            <li class="focus">
              <p>width</p>
              <p>
                设备宽度查询
              </p>
            </li>
            <li class="focus">
              <p>orientation</p>
              <p>
                值为landscape/portrait，分别表示横屏/竖屏。由于是根据宽高比来判断，所以可能不准确
              </p>
            </li>
            <li>
              <p>resolution</p>
              <p>
                分辨率检测，safari不支持，建议在生产环境中
                <b>慎用</b>
              </p>
            </li>
            <li>
              <p>display-mode</p>
              <p>
                web应用的显示模式
                <br />
                <b>fullscreent</b>
                : 全屏显示
                <br />
                <b>standalone</b>
                :
                如同独立的应用程序，有独立窗口和启动程序，没有导航元素，但有状态栏
                <br />
                <b>minimal-ui</b>
                :
                如同独立的应用程序，有独立窗口和启动程序，有一个用来导航的最小元素集
                <br />
                <b>browser</b>
                : 浏览器的一个标签页
              </p>
            </li>
            <li class="focus">
              <p>any-hover</p>
              <p>
                表示有任意输入设备可以经过某个元素，
                <b>详见后章</b>
              </p>
            </li>
            <li class="focus">
              <p>hover</p>
              <p>
                表示主输入设备是否可以经过某个元素，
                <b>详见后章</b>
              </p>
            </li>
            <li class="focus">
              <p>any-pointer</p>
              <p>
                表示有任意输入设备可以触控操作，以及如此，精度为多少，
                <b>详见后章</b>
              </p>
            </li>
            <li class="focus">
              <p>pointer</p>
              <p>
                表示主输入设备是否可以触控操作，以及如此，精度为多少，
                <b>详见后章</b>
              </p>
            </li>
            <li>
              <p>inverted-colors</p>
              <p>
                设备是否反色，none/inverted
              </p>
            </li>
            <li class="focus">
              <p>prefers-color-scheme</p>
              <p>
                可以检测用户是否使用了深色模式。
                <b>详见后章</b>
              </p>
            </li>
            <li class="focus">
              <p>prefers-reduced-motion</p>
              <p>
                可以检测用户是否配置了没必要的动画选项。
                <b>详见后章</b>
              </p>
            </li>
          </ul>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>部分媒体特性详情</dt>
        <dd>
          <h4>
            prefers-color-scheme
          </h4>
          暂无
        </dd>
        <dd>
          <h4>
            prefers-reduced-motion
          </h4>
          暂无
        </dd>
        <dd>
          <h4>
            鼠标行为和触碰行为的支持检测
          </h4>
          暂无
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
